<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">疫情防控打卡列表查询</b>
    <el-container>
        <div class="block">
            <el-date-picker
                    v-model="choice_date"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    @change="dateChange">
            </el-date-picker>
        </div>
    </el-container>
    <el-table :data="tableData">
        <el-table-column align="center" type=index label="序号" prop="clockId" width="50"></el-table-column>
        <el-table-column align="center" prop="date" label="打卡时间"></el-table-column>
        <el-table-column align="center" prop="userNumber" label="学号/工号" width="150"></el-table-column>
        <el-table-column align="center" prop="address" label="地址"></el-table-column>
        <el-table-column align="center" prop="role" label="角色"></el-table-column>
        <el-table-column align="center" prop="phone" label="电话" width="150"></el-table-column>
        <el-table-column align="center" prop="identification" label="身份证号码" width="200"></el-table-column>
        <el-table-column align="center" label="是否健康">
            <template slot-scope="scope">
                <span>{{scope.row.symptom == 'true' ? '健康' : '异常'}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="是否为密接">
            <template slot-scope="scope">
                <span>{{scope.row.closer == 'true' ? '是' : '否'}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="是否到过中高风险地区">
            <template slot-scope="scope">
                <span>{{scope.row.risk == 'true' ? '是' : '否'}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="是否被隔离">
            <template slot-scope="scope">
                <span>{{(scope.row.isolate == 'true') ? '是' : '否'}}</span>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

</div>
<script>
    new Vue({
        el: "#div",
        data: {
            choice_date: '',
            formLabelAlign: {},
            tableData: [],
            userInfo: {},
            user: {},
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            otherInfo: {
                facultyId: 1,
                classId: 0
            },
        },
        methods: {
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
            //分页查询功能
            selectByPage() {
                //向后台发送请求
                let param = "action=showCheckinByNumber&curPage=" + this.pagination.currentPage +
                    "&pageSize=" + this.pagination.pageSize + "&date=" + this.choice_date;
                console.log(param);

                axios.post("/EpidemicControlSystem_war_exploded/CheckinServlet", param + "&userNumber=" + this.userInfo.userNumber)
                    .then(response => {
                        //将查询出的数据赋值给tableData
                        this.tableData = response.data.checkins;
                        //总条数
                        this.pagination.total = response.data.count;

                    });
            },

            dateChange() {
                this.selectByPage();
            },
            getNowTime(){
                var d = new Date(),
                    str = '';
                str += d.getFullYear() + '-'; //获取当前年份
                str += d.getMonth() + 1 + '-'; //获取当前月份（0——11）
                str += d.getDate() + '';
                this.choice_date = str;
            },
            getUser(){
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", "action=user")
                    .then(res => {
                        this.user = res.data.loginUser;
                        this.userInfo = res.data.loginUserInfo;
                        console.log(this.userInfo.userNumber);

                        //调用分页查询功能
                        this.selectByPage();
                    });
            }

        },
        created() {
            this.getNowTime();
            this.getUser();
        }
    });
</script>
</body>
</html>